<!doctype html>
<html class="no-js">
<script src="../js/head.js"></script>
<body>
<script src="../js/header.js"></script>

<meta charset='utf-8'/>
<link href='../css/fullcalendar.min.css' rel='stylesheet'/>
<link href='../css/fullcalendar.print.min.css' rel='stylesheet' media='print'/>
<script src='../js/moment.min.js'></script>
<script src='../js/fullcalendar.min.js'></script>
<script src="../js/zh-cn.js"></script>
<style>
    #calendar {
        max-width: 900px;
        margin: 50px auto;
    }
</style>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <script src="../js/sidebar.js"></script>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">出勤统计</strong>
                </div>
                <hr/>

                <div id='calendar'></div>
            </div>
            <script src="../js/footer.js"></script>
        </div>
        <!-- content end -->
    </div>

    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
       data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
</div>
<script src="../js/util.js"></script>
<script>

    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: new Date().Format("yyyy-MM-dd"),
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: function (start, end, timezone, callback) {
                $.ajax({
                    url: '../apply',
                    dataType: 'json',
                    data: {
                        state: 5
                    },
                    success: function (data) { // 获取当前月的数据
                        var events = [];
                        var list = data.result.list;
                        for(var i = 0;i < list.length;i++){
                            events.push({
                                title : '部门:' + list[i].departmentName + "\n员工:" + list[i].employeeName +
                                    "---" + list[i].typeName,
                                start : new Date(list[i].startTime).Format("yyyy-MM-dd"),
                                end : new Date(list[i].endTime).Format("yyyy-MM-dd")
                            })
                        }
                        callback(events);
                    }
                });
            }
        });

    });
</script>
</body>
</html>
